<template>
    <div style="width: 100vw;height: 100vh;">
        <div class="map_warp" :style="{ transform: `scale(${scaleRatio})` }">
            <div class="map_header">
                <div class="map_header_left">{{ dayweather }} {{ daytemp }}℃</div>
                <div class="map_header_center">贞一环境智慧运管中心</div>
                <div class="map_header_rihgt">
                    <span>{{ dateFormat(date) }} </span>
                    <img style="width: 30px;height: 30px;" src="../imgUrl/mapOut.png" alt="">
                    <span @click="closeFun" style="font-size: 26px;padding: 0 10px;">关闭</span>
                </div>
            </div>
            <div class="map_center">
                <div class="map_center_left">
                    <div class="mapleft">
                        <img style="width: 100%;height: 100%;" src="../imgUrl/mapleft.png" alt="">
                    </div>
                    <div style="padding-left: 33px;">
                        <!-- <div class="center_img">
                            <div style="color: white;display: flex;justify-content: center;">
                                <div style="width: 100%;margin-top: -50px;position: relative;">
                                    <img style="width: 100%;height: 60px;" src="../imgUrl/site.png" alt="">
                                    <div
                                        style="display: flex;position:absolute;top: 0;padding-top: 12px;padding-left: 5px;">
                                        <div style="width: 200px;text-align: center;font-size: 20px;">全部站点</div>
                                        <div
                                            style="width: 100%;border-left: 1px solid #5C8AB7;position: relative;display: flex;">
                                            <div style="width: 350px;padding: 10px;">{{ arrowDownName }}</div>
                                            <div @click="arrowDownFun()"
                                                style="position: absolute;right: 0;width: 20px;padding-top: 10px;">
                                                <i v-if="arrowDownData" class="el-icon-arrow-down"
                                                    style="font-size: 20px;"></i>
                                                <i v-else class="el-icon-arrow-up" style="font-size: 20px;"></i>
                                            </div>

                                        </div>
                                    </div>
                                    <div v-if="arrowDownData" class="arrowDownUr">
                                        <div class="arrowDownLi" :class="{ 'arrowDownLiClick': arrowDownID == item.id }"
                                            @click="arrowDownitem(item)" :key="index"
                                            v-for="(item, index) of centerList">
                                            {{ item.pageName }}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div> -->
                        <div class="mapleft_cardLang ">
                            <div class="maptitle">设备监控</div>
                            <div>
                                <!-- <div class="cardLang_header">
                                    <div class="cardLang_text" :class="{ 'cardLang_text_click': cardLangTextData == 1 }"
                                        @click="cardLangTextFun(1)">设备</div>
                                    <div class="cardLang_text" :class="{ 'cardLang_text_click': cardLangTextData == 2 }"
                                        @click="cardLangTextFun(2)">监控</div>
                                </div> -->
                                <div v-show="cardLangTextData == 1" class="cardLang_center">
                                    <div class="device_center">
                                        <div class="device_li">设备名</div>
                                        <div class="device_li" style="text-align: center;">在线</div>
                                        <div class="device_li" style="text-align: right;cursor: pointer;">弹窗</div>
                                    </div>
                                </div>
                                <div v-show="cardLangTextData == 2" class="cardLang_center">
                                    <div style="padding:15px;">
                                        <VidoePaly :src="vidoeData[1].url" :name="'video001'" />
                                    </div>
                                    <!-- <div @click="videoFun(item)" class="cardLang_video" :key="index"
                                        v-for="(item, index) of channelArr">{{
                                            item.name }}</div> -->
                                </div>
                            </div>
                        </div>
                        <div class="mapleft_cardLang ">
                            <div class="maptitle">设备监控</div>
                            <div>
                                <!-- <div class="cardLang_header">
                                    <div class="cardLang_text" :class="{ 'cardLang_text_click': cardLangTextData == 1 }"
                                        @click="cardLangTextFun(1)">设备</div>
                                    <div class="cardLang_text" :class="{ 'cardLang_text_click': cardLangTextData == 2 }"
                                        @click="cardLangTextFun(2)">监控</div>
                                </div> -->
                                <div v-show="cardLangTextData == 1" class="cardLang_center">
                                    <div class="device_center">
                                        <div class="device_li">设备名</div>
                                        <div class="device_li" style="text-align: center;">在线</div>
                                        <div class="device_li" style="text-align: right;cursor: pointer;">弹窗</div>
                                    </div>
                                </div>
                                <div v-show="cardLangTextData == 2" class="cardLang_center">
                                    <div style="padding:15px;">
                                        <VidoePaly :src="vidoeData[2].url" :name="'video001'" />
                                    </div>
                                    <!-- <div @click="videoFun(item)" class="cardLang_video" :key="index"
                                        v-for="(item, index) of channelArr">{{
                                            item.name }}</div> -->
                                </div>
                            </div>
                        </div>
                        <!-- <div class="mapleft_card">
                            <div class="maptitle">实时告警</div>
                            <div class="maptable_list auto-scroll-row">
                                <div class="maptable_li" style="text-align: left;">战点名称</div>
                                <div class="maptable_li" style="text-align:center;">告警类型</div>
                                <div class="maptable_li" style="text-align: center;">告警时间</div>
                                <div class="maptable_li" style="text-align: right;">操作</div>
                            </div>
                            <div class="maptable">
                                <autoScroll :step="1" :period="100" :cycle="true" :resume-smooth="true">
                                    <div class="maptable_list auto-scroll-row" :key="index"
                                        v-for="(item, index) of mapInspection">
                                        <div class="maptable_li" style="text-align: left;">{{ item.name }}</div>
                                        <div class="maptable_li" style="text-align:center;">{{ item.times }}</div>
                                        <div class="maptable_li" style="text-align: center;">{{ item.remerk }}</div>
                                        <div class="maptable_li" @click="maptableFun(item)" style="text-align: right;">
                                            {{ '处理' }}</div>
                                    </div>
                                </autoScroll>
                            </div>
                        </div> -->
                    </div>
                </div>
                <div class="map_center_map" style="margin-top: -85px;">
                    <iframe class="iframeStyle" :src="iframeSrc" frameborder="0"></iframe>
                </div>
                <!-- <div class="map_center_right">
                    <div style="padding-right: 25px;">
                        <div class="mapRight_card">
                            <div class="maptitle">
                                今日能耗</div>
                            <div>
                                <lineAndebarChart />
                            </div>
                        </div>
                        <div class="mapRight_card">
                            <div class="maptitle">今日进出水</div>
                            <div>
                                <lineMapChartStart />
                            </div>
                        </div>
                        <div class="mapRight_card">
                            <div class="maptitle">今日水质</div>
                            <div>
                                <lineMapChartwater />
                            </div>
                        </div>
                    </div>
                    <div class="mapRight">
                        <img style="width: 100%;height: 100%;" src="../imgUrl/mapright.png" alt="">
                    </div>
                </div> -->
            </div>
            <div class="map_food">
                <div class="map_food_btn" @click="mapFoodBtn(1)">地图总览</div>
                <div class="map_food_btn" @click="mapFoodBtn(2)">设备管理</div>
                <div class="map_food_btn" @click="mapFoodBtn(3)">数据分析</div>
            </div>

        </div>
        <el-dialog title="巡检计划" :visible.sync="seeAlsoOpen" width="600px" append-to-body>
            <el-form ref="form" :model="form" :rules="rules" label-width="100px">

                <el-form-item label="告警真实性" prop="geographyName">
                    <el-select style="width: 100%;" v-model="form.geographyName" placeholder="请选择图片类型">
                        <el-option v-for="dict in dict.type.iot_alert_level" :key="dict.value" :label="dict.label"
                            :value="dict.value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="备注" prop="remark">
                    <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
                </el-form-item>
                <el-form-item label="上传图">
                    <imageUpload ref="image-upload" :disabled="true" :value="form.geographyUrl" :limit="1" :fileSize="1"
                        @input="getImagePath($event)">
                    </imageUpload>
                    <!-- <div class="el-upload__tip" style="color:#f56c6c">
                提示：上传后需要提交保存</div> -->
                </el-form-item>

            </el-form>
            <div slot="footer" style="text-align: center;">
                <el-button type="primary" @click="submitForm('form')">保 存</el-button>
                <el-button @click="seeAlsoOpen = false">关 闭</el-button>
            </div>
        </el-dialog>
        <el-dialog title="视频监控" :visible.sync="videoOpen" width="600px" append-to-body>
            <div>
                <player ref="player" :videoUrl="videoUrl" fluent autoplay class="player-wrap" />
            </div>
            <div slot="footer" style="text-align: center;">
                <el-button @click="videoOpen = false">关 闭</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import PieMapChart from './components/PieMapChart.vue'
import MapChart from './components/MapChart.vue'
import barMapChart from './components/barMapChart.vue'
import lineAndebarChart from './confingModel/lineAndebarChart.vue'
import barMapGeeChart from './components/barMapGeeChart.vue'
import lineMapChartStart from './confingModel/lineMapChartStart.vue'
import lineMapChartwater from './confingModel/lineMapChartwater.vue'
import axios from 'axios'
import autoScroll from 'vue-list-auto-scroll-tsc'
import AMapLoader from '@amap/amap-jsapi-loader'
import { listDeviceShort } from '@/api/iot/device';
import { listCenter } from '@/api/scada/center';
import VidoePaly from './vidoePaly.vue'
import vidoeJson from '../../../../public/draco/vidoeJson';
import { listSipDeviceChannel } from '@/api/iot/sipdevice';
import { startPlay } from '@/api/iot/channel';
import player from '@/views/components/player/jessibuca.vue';
export default {
    name: 'mapping',
    dicts: ['iot_alert_level'],
    components: {
        PieMapChart,
        MapChart,
        autoScroll,
        barMapChart,
        lineAndebarChart,
        barMapGeeChart,
        VidoePaly,
        lineMapChartStart,
        lineMapChartwater,
        player
    },
    data() {
        return {
            rolesBoll: true,
            scaleRatio: 1,
            screenWidth: 0,
            widthNum: 1280,
            heightNum: 540,
            latitude: '',
            longitude: '',
            dayweather: '',
            daytemp: '',
            date: new Date(),
            timer: null,
            // mapInspection: [{
            //     name: '1xx站点',
            //     times: '07-30 16:45',
            //     remerk: '巡检无隐患'
            // }, {
            //     name: '2xx站点',
            //     times: '07-30 16:45',
            //     remerk: '巡检无隐患'
            // },
            // {
            //     name: '3XX站点',
            //     times: '07-30 16:45',
            //     remerk: '巡检无隐患'
            // },
            // {
            //     name: '4XX站点',
            //     times: '07-30 16:45',
            //     remerk: '巡检无隐患'
            // }, {
            //     name: '5XX站点',
            //     times: '07-30 16:45',
            //     remerk: '巡检无隐患'
            // }, {
            //     name: '6XX站点',
            //     times: '07-30 16:45',
            //     remerk: '巡检无隐患'
            // }, {
            //     name: '7XX站点',
            //     times: '07-30 16:45',
            //     remerk: '巡检无隐患'
            // }],
            mapInspection: [],
            dayData: '0',
            isForm: {
                normalData: 0,
                forewarningData: 0,
                offlineData: 0
            },
            centerList: [],
            arrowDownName: '',
            arrowDownID: '',
            groupData: [],
            arrowDownData: false,
            cardLangTextData: 2,
            vidoeData: [],
            iframeSrc: '',
            seeAlsoOpen: false,
            form: {},
            rules: {
                geographyName: [
                    { required: true, message: "不能为空", trigger: "blur" },
                ],
                remark: [
                    { required: true, message: "不能为空", trigger: "blur" },
                ]
            },
            channelArr: [],
            videoOpen: false,
            videoUrl: '',
            playerIdx: 0,
        }
    },
    created() {
        this.mapFun();
        this.daysUntil();
        this.deviceListFun();
        this.listCenterFun()
        // this.getAreaIp()
        this.vidoeData = vidoeJson
    },
    mounted() {

        let _this = this// 声明一个变量指向Vue实例this，保证作用域一致
        this.timer = setInterval(() => {
            _this.date = new Date(); // 修改数据date
        }, 1000)
        // this.getCurrentPosition()
        this.updateScreenWidth(); // 初始化宽度
        window.addEventListener('resize', this.updateScreenWidth); // 监听窗口大小变化

    },
    methods: {
        listSipDeviceChannelFun(arr) {
            listSipDeviceChannel(arr).then((response) => {
                if (response.code === 200) {
                    console.log(response)
                    this.channelArr = response.data;
                }
            });
        },
        videoFun(item) {
            console.log(item)
            this.videoOpen = true
            this.playerIdx = 0
            this.sendDevicePush(item.basicData);
        },
        maptableFun(item) {
            this.seeAlsoOpen = true
        },
        // 查询组态中心列表
        listCenterFun() {
            let params = {
                pageSize: 999,
                pageNum: 1,
            }
            listCenter(params).then((response) => {
                if (response.code === 200) {
                    this.centerList = response.rows;
                    this.arrowDownitem(this.centerList[0])
                }
            });
        },
        /** 查询所有简短设备列表 */
        deviceListFun() {
            let params = {
                pageSize: 999,
                pageNum: 1,
            }
            listDeviceShort(params).then((response) => {
                let deviceList = response.rows;
                this.isForm.normalData = deviceList.length;
            });
        },
        daysUntil() {
            let today = new Date();
            let endDate = new Date('2024-12-01T00:00:00')
            const oneDay = 24 * 60 * 60 * 1000; // 每天的毫秒数
            let isData = Math.round(Math.abs((endDate - today) / oneDay));
            this.dayData = isData + ''
        },
        mapFun() {
            window._AMapSecurityConfig = {
                securityJsCode: "249fc67c47f2650bfeec222499e82c16",
            };
            AMapLoader.reset()
            const _this = this
            AMapLoader.load({
                key: '37ab382ecdb27440a23c0a28853e8c86', // 申请好的Web端开发者Key，首次调用 load 时必填
                version: '1.4.15', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
                plugins: []  // 需要使用的的插件列表，如比例尺'AMap.Scale'等，如果是地图控件，必须再 map.addControl添加
            })
                .then((AMap) => {
                    AMap.plugin('AMap.Weather', function () {
                        //创建天气查询实例
                        var weather = new AMap.Weather();
                        //执行实时天气信息查询
                        weather.getLive('信阳市', function (err, data) {
                            _this.dayweather = data.weather + ' ' + "风向" + data.windDirection + ' ' + "风力" + data.windPower + "级" + ' '
                            _this.daytemp = data.temperature
                        });
                    });
                })
                .catch((e) => {
                    console.log(e)
                })
        },
        updateScreenWidth() {
            this.screenWidth = window.innerWidth;
            this.scaleRatio = this.screenWidth / 2560
        },

        getCurrentPosition() {
            if (navigator.geolocation) {
                var options = {
                    enableHighAccuracy: true, //布尔值，表示系统是否使用最高精度来表示结果，注意，这会导致较慢的响应时间或者增加电量消耗（比如对于支持gps的移动设备来说）。如果值为false ，设备会通过更快响应以及/或者使用更少的电量等方法来尽可能的节约资源。默认值fasle
                    timeout: 50000, //它表明的是设备必须在多长时间（单位毫秒）内返回一个位置。默认直到获取到位置才会返回值。
                    maximumAge: 0, //表明可以返回多长时间（即最长年龄，单位毫秒）内的可获取的缓存位置。如果设置为 0, 说明设备不能使用一个缓存位置，而且必须去获取一个真实的当前位置。默认0
                };
                navigator.geolocation.getCurrentPosition(
                    this.showPosition,
                    this.errorPosition,
                    options
                );
            } else {
                this.errorPositionTxt = "不支持获取用户当前位置";
            }
        },
        showPosition(position) {
            this.latitude = position.coords.latitude;
            this.longitude = position.coords.longitude;
            this.getArea();
        },
        errorPosition(error) {
            switch (error.code) {
                // 不允许获取当前位置
                case error.PERMISSION_DENIED:
                    this.errorPositionTxt = "不允许获取当前位置";
                    break;
                // 无法获取当前位置
                case error.POSITION_UNAVAILABLE:
                    this.errorPositionTxt = "无法获取当前位置";
                    break;
                // 获取位置的请求超时。
                case error.TIMEOUT:
                    this.errorPositionTxt = "获取位置请求超时。";
                    break;
                // 获取位置操作超时
                case error.UNKNOWN_ERROR:
                    this.errorPositionTxt = "获取位置操作超时";
                    break;
            }
        },

        getAreaIp() {
            axios({
                method: 'get',
                // url: 'https://api.songzixian.com/api/ip',
                url: 'https://api.oioweb.cn/api/weather/GetWeather',
                params: {
                    // dataSource: 'generic_ip',
                }
            }).then((res) => {
                if (res.data.code == 200) {
                    // this.getArea(res.data.data.city)
                    let temp = res.data.result.condition
                    this.daytemp = temp.min_degree + "~" +
                        temp.max_degree
                    this.dayweather = temp.day_weather + "转" + temp.night_weather
                } else {
                    this.$modal.msgError("查询失败");
                }

            })
        },
        getArea(long) {
            let _this = this
            // axios({
            //     method: 'get',
            //     url: 'https://api.songzixian.com/api/weather',
            //     params: {
            //         dataSource: 'gentle_breeze_weather',
            //         weatherType: 'real_time',
            //         location: long
            //     }
            // }).then((res) => {
            //     if (res.data.code == 200) {
            //         console.log(res.data.data)
            //     } else {
            //         this.$modal.msgError("天气查询失败");
            //     }

            // })
            axios({
                url: "https://restapi.amap.com/v3/weather/weatherInfo",
                method: "GET",
                params: {
                    key: "e0c48eb92615d1ab98b5ad25d3c6a044",
                    city: long,
                    extensions: 'all',
                    // output: "JSON"
                },
            }).then(function (response) {
                console.log("查询到的天气哪去了" + response.data.forecasts[0].casts
                [0].dayweather)
                _this.dayweather = response.data.forecasts[0].casts
                [0].dayweather
                _this.daytemp = response.data.forecasts[0].casts
                [0].nighttemp + "~" + response.data.forecasts[0].casts
                [0].daytemp
            }).catch(function (error) {

            })
        },
        dateFormat(time) {
            var date = new Date(time);
            var year = date.getFullYear();
            /* 在日期格式中，月份是从0开始的，因此要加0
            * 使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
            * */
            var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
            var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
            var hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
            var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
            var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
            // 拼接
            return month + "月" + day + "日" + " " + hours + ":" + minutes + ":" + seconds;
        },
        mapFoodBtn(type) {
            this.$emit('success1', {
                type: type
            })
        },
        isLocalEnvironment() {

        },
        closeFun() {
            window.close();
        },
        arrowDownitem(item) {
            this.arrowDownID = item.guid
            this.arrowDownName = item.pageName
            this.arrowDownData = false
            if (item.id == "20") {
                this.listSipDeviceChannelFun('41152100001180000001')
            }
            if (process.env.NODE_ENV == "development") {
                this.iframeSrc = `http://localhost/topo/fullscreen?id=${item.id}&guid=${item.guid}`
            } else {
                this.iframeSrc = `http://zyhjxy.cn/topo/fullscreen?id=${item.id}&guid=${item.guid}`
            }

        },
        arrowDownFun() {
            this.arrowDownData = !this.arrowDownData
        },
        cardLangTextFun(type) {
            this.cardLangTextData = type
        },
        /**获取上传图片的路径 */
        getImagePath(data) {
            this.form.geographyUrl = data;
        },
        /** 提交表单 */
        submitForm() {
            this.$refs.form.validate(valid => {
                if (valid) {
                    this.$modal.msgSuccess('提交成功！');
                } else {
                    this.$modal.msgError('提交失败！');
                }
            });
        },
        //通知设备上传媒体流
        sendDevicePush(itemData) {
            console.log(itemData, 1111111111)
            let deviceId = itemData.deviceSipId;
            let channelId = itemData.channelSipId;
            console.log('通知设备推流1：' + deviceId + ' : ' + channelId);
            let that = this;

            startPlay(deviceId, channelId)
                .then((response) => {
                    console.log('流媒体信息：' + response.data);
                    let res = response.data;
                    console.log('playurl：' + res.playurl);
                    that.videoUrl = res.playurl;

                })
                .finally(() => {

                });
        },
    },

    beforeDestroy() {
        window.removeEventListener('resize', this.updateScreenWidth); // 移除监听器
        if (this.timer) {
            clearInterval(this.timer); // 在Vue实例销毁前，清除我们的定时器
        }
    }
}
</script>

<style lang="scss" scoped>
body,
html {
    margin: 0;
    padding: 0;
}

.map_warp {
    width: 2560px;
    height: 1080px;
    background-image: url(../imgUrl/beijing.png);
    background-size: 100% 100%;
    transform-origin: 0% 0%;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;

    .map_header {
        width: 2560px;
        height: 200px;
        background-image: url(../imgUrl/mapheader.png);
        background-size: 100% 100%;
        color: white;
        position: relative;

        .map_header_left {
            padding-left: 30px;
            padding-top: 41px;
            font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
            font-weight: bold;
            font-size: 32px;
            color: #a3b1b8;
            line-height: 38px;
            text-align: center;
            font-style: normal;
            text-transform: none;
            position: absolute;
            left: 0;
            top: 0;
        }

        .map_header_center {
            flex: 1;
            text-align: center;
            padding-top: 36px;
            font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
            font-weight: 800;
            font-size: 50px;
            color: #FFFFFF;
            line-height: 59px;
            letter-spacing: 5px;
            text-shadow: 2px 4px 4px #11247A;
            text-align: center;
            font-style: normal;
            text-transform: none;
        }

        .map_header_rihgt {
            text-align: right;
            padding-right: 20px;
            padding-top: 41px;
            font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
            font-weight: bold;
            font-size: 30px;
            color: #a3b1b8;
            line-height: 38px;
            text-align: center;
            font-style: normal;
            text-transform: none;
            position: absolute;
            right: 20px;
            top: 0;
        }
    }

    .map_food {
        width: 2560px;
        height: 90px;
        background-image: url(../imgUrl/mapfood.png);
        margin-top: -45px;
        background-size: 100% 100%;
        display: flex;
        justify-content: center;

        .map_food_btn {
            background-image: url(../imgUrl/mapfoodbtn.png);
            background-size: 100% 100%;
            width: 183px;
            height: 62px;
            color: white;
            text-align: center;
            font-family: YouSheBiaoTiHei, YouSheBiaoTiHei;
            font-weight: 400;
            font-size: 28px;
            line-height: 62px;
            letter-spacing: 1px;
            text-shadow: 0px 3px 10px #0032B2;
            text-align: center;
            font-style: normal;
            text-transform: none;
            margin-right: 12px;
            margin-top: -30px;
            display: inline-block;
            cursor: pointer;
        }
    }

    .map_center {
        width: 100%;
        margin-top: -100px;
        display: flex;

        .map_center_left {
            display: flex;

            .mapleft {
                width: 44.5px;
            }

            .center_img {
                width: 100%;
                margin-top: 50px;
                background-size: 100% 100%;
            }

            .mapleft_cardLang {
                width: 480px;
                height: 550px;
                background-image: url(../imgUrl/homeIocn02.png);
                background-size: 100% 100%;
                margin-bottom: 20px;

                .cardLang_header {
                    display: flex;

                    .cardLang_text {
                        font-family: PingFang SC, PingFang SC;
                        font-weight: 500;
                        font-size: 5rpx;
                        color: white;
                        padding: 20px 20px 10px 20px;
                        cursor: pointer;
                    }

                    .cardLang_text_click {
                        color: #68D1FF;
                    }
                }

                .cardLang_center {
                    width: 100%;
                    height: 430px;
                    overflow-y: scroll;

                    &::-webkit-scrollbar {
                        display: none;
                        /* 对于Chrome, Safari和Opera */
                    }

                    .device_center {
                        display: flex;
                        color: #68D1FF;
                        padding: 2px 10px;

                        .device_li {
                            width: 30%;
                        }
                    }
                }

            }

            .mapleft_card {
                width: 580px;
                height: 292.1px;
                background-image: url(../imgUrl/mapcard.png);
                background-size: 100% 100%;
                margin-bottom: 20px;

                .maptable {
                    width: 96%;
                    height: 200px;
                    padding: 10px 0;
                    overflow: hidden;
                    text-align: center;
                    margin: 0px auto;

                    ::-webkit-scrollbar {
                        display: none;
                    }


                }

                .maptable_list {
                    display: flex;
                    width: 100%;
                    height: 30px;
                    background: rgba(0, 163, 255, 0.3);
                    border-radius: 0px 0px 0px 0px;
                    color: rgba(255, 255, 255, 1);
                    padding: 5px;
                    margin-top: 3px;

                    .maptable_li {
                        width: 25%;
                        overflow: hidden;
                    }
                }

                .mapleft1 {
                    display: flex;

                    .mapleft1_sticit {
                        color: white;
                        font-family: DIN, DIN;
                        font-weight: bold;
                        font-size: 20px;
                        line-height: 23px;
                        text-align: left;
                        font-style: normal;
                        text-transform: none;

                        .sticit_header {
                            text-align: center;
                            margin: 30px 0;


                            .header_num {
                                width: 22px;
                                text-align: center;
                                background-image: url(../imgUrl/maonum.png);
                                background-size: 100% 100%;
                                display: inline-block;
                                font-family: DIN, DIN;
                                font-weight: bold;
                                font-size: 20px;
                                line-height: 23px;
                                font-style: normal;
                                text-transform: none;
                            }
                        }

                        .sticit_number {
                            display: flex;
                            font-size: 10px;
                            margin-top: 10px;
                            font-family: Microsoft YaHei, Microsoft YaHei;
                            font-weight: 400;
                            font-size: 18px;
                            color: #00C8FF;
                            line-height: 21px;
                            text-align: center;
                            font-style: normal;
                            text-transform: none;

                            .sticit_number1 {
                                width: 88px;
                                height: 88px;
                                background-image: url(../imgUrl/mapnumbule.png);
                                background-size: 100% 100%;
                                margin-left: 20px;
                                display: flex;
                                justify-content: center;
                                align-items: center;
                                font-family: DINPro, DINPro;
                                font-weight: bold;
                                font-size: 47px;

                                line-height: 41px;
                                text-align: right;
                                font-style: normal;
                                text-transform: none;
                            }

                            .sticit_number2 {
                                width: 88px;
                                height: 88px;
                                background-image: url(../imgUrl/mapNumred.png);
                                background-size: 100% 100%;
                                display: flex;
                                margin-left: 20px;
                                justify-content: center;
                                align-items: center;
                                font-family: DINPro, DINPro;
                                font-weight: bold;
                                font-size: 47px;

                                line-height: 41px;
                                text-align: right;
                                font-style: normal;
                                text-transform: none;
                            }

                            .sticit_number3 {
                                width: 88px;
                                height: 88px;
                                background-image: url(../imgUrl/mapnumgary.png);
                                background-size: 100% 100%;
                                margin-left: 20px;
                                display: flex;
                                justify-content: center;
                                align-items: center;
                                font-family: DINPro, DINPro;
                                font-weight: bold;
                                font-size: 47px;

                                line-height: 41px;
                                text-align: right;
                                font-style: normal;
                                text-transform: none;
                            }

                        }

                    }
                }
            }


        }

        .map_center_map {
            flex: 1;
            padding-top: 50px;

        }

        .map_center_right {
            display: flex;

            .mapRight {
                width: 44.5px;
            }

            .mapRight_card {
                width: 580px;
                height: 292.1px;
                background-image: url(../imgUrl/mapcard.png);
                background-size: 100% 100%;
                margin-bottom: 20px;

                .mapRight_cardFlex {
                    display: flex;
                    margin-top: 42px;

                    .cardFlex_img {
                        width: 180px;
                        height: 145px;
                        background-image: url(../imgUrl/maprightbj.png);
                        background-size: 100% 100%;
                        margin-left: 9px;
                        color: white;


                        .cardFlex_text {
                            font-family: Afacad, Afacad;
                            font-weight: 400;
                            font-size: 17px;
                            color: #00C2FF;
                            line-height: 25px;
                            text-align: left;
                            font-style: normal;
                            text-transform: none;
                            padding: 6px;
                        }

                        .cardFlex_num {
                            font-family: Afacad, Afacad;
                            font-weight: 400;
                            font-size: 28px;
                            color: #FFFFFF;
                            line-height: 25px;
                            letter-spacing: 1px;
                            text-shadow: 0px 0px 5px #0075FF;
                            text-align: right;
                            font-style: normal;
                            text-transform: none;
                            padding: 35px 15px;
                        }
                    }
                }
            }
        }

        .maptitle {
            margin-left: 51px;
            padding-top: 7px;
            font-family: YouSheBiaoTiHei, YouSheBiaoTiHei;
            font-weight: 400;
            font-size: 27px;
            text-shadow: 0px 3px 3px rgba(0, 38, 95, 0.3);
            text-align: left;
            font-style: normal;
            text-transform: none;
            color: white;
        }
    }

}

::v-deep .iframeStyle {
    width: 100%;
    height: 100%;
    overflow: auto;
    /* 这确保内容如果超出容器会滚动 */
    scrollbar-width: none;
    /* 对于Firefox */

    &::-webkit-scrollbar {
        display: none;
        /* 对于Chrome, Safari和Opera */
    }

}



::-webkit-scrollbar {
    /*隐藏滚轮*/
    display: none;
}

.arrowDownUr {
    width: 100%;
    background-color: rgba(0, 55, 86, 0.60);
    height: 300px;
    border-radius: 5px;
    overflow-y: scroll;
    position: absolute
}

.arrowDownLi {
    width: 100%;
    text-align: center;
    padding: 5px 0;
    cursor: pointer;
}

.arrowDownLiClick {
    color: #00C2FF;
}

.cardLang_video {
    width: 100%;
    height: 180px;
    background-color: gainsboro;
    margin-top: 5px;
}
</style>
